@import '../../css/Variable.styl'

.buttonComments
  background-color transparent
  color darkGrey2
  &:hover
    color fontColor

.timeline__comment
  padding standardSpacing
  border-radius standardBorderRadius
  background-color offWhite
  display flex
  flex-direction column

  &.sent
    margin-inline-start 5%
  &.received
    margin-inline-end 5%
  &__body
    display flex
    flex-direction row

    .avatar-wrapper
      margin-inline-end standardSpacing

    &__content
      flex 1
      min-width 0

      &__text
        img
          max-width 100%
          height auto
          box-shadow 0px 0px 10px darkGrey1
        & a:not(.linkPreview)
          color bootstrapLinkColor
          &:hover
            color bootstrapLinkColor
            text-decoration underline
      &__textAndPreview
        flex 1

      &__header
        display flex
        align-items center
        flex-direction row
        margin-bottom standardSpacing
        font-size metadataFontSize
        &__meta
          flex 1
          &__author
            overflow-wrap anywhere
            font-size standardFontSize
            &:hover
              text-decoration underline
        &__actions.dropdownMenuButton
          padding 0
          color grey
          &::after
            display none
          &:hover
            color fontColor
  &__footer
    display flex
    margin-top standardSpacing
    justify-content space-between

@media (max-width: max-xs)
  .buttonComments
    margin-inline-start textSpacing
    > .iconbutton__icon
      margin 0px
